<template>
    <div id="recorder">
        <template v-if="!showPlay">
            <span class="record-start record-ctrl" v-if="!startRecord" @click="record"></span>
            <span class="record-stop record-ctrl" v-if="startRecord" @click="stopRecord"></span>
            <span class="record-confirm" v-if="!startRecord">
                <icon name="svg-close" scale="2.5" style="color: #333" @click.native="hideRecorder"></icon>
            </span>
        </template>
        <template v-else>
            <span class="record-play record-ctrl" @click="playRecord">
                <icon name="play" scale="4.9"></icon>
            </span>
            <span class="record-confirm">
                <icon name="svg-undo" scale="2.5" style="color: #f3423f" @click.native="undo"></icon>
                <icon name="svg-close" scale="2.5" style="color: #333" @click.native="hideRecorder"></icon>
                <icon name="svg-check" scale="2.5" style="color: #449ece" @click.native="sendRecord"></icon>
            </span>
        </template>
        <audio id="recorder-player"></audio>
    </div>
</template>
<script>
export default {
    props: {
        showRecorder: Boolean
    },
    data() {
        return {
            startRecord: false,
            showPlay: false,
            stream: null,
            recorder: null,
            chunks: [],
            file: null,
            timer: null
        }
    },
    watch: {
        recorder(val) {
            if (val != null) {
                val.ondataavailable = e => {
                    this.chunks.push(e.data);
                    let blob = new Blob(this.chunks, { 'type': 'audio/mpeg; codecs=opus' });
                    this.file = new File([blob], "voice.mp3", { type: "audio/mpeg" });
                    let player = document.querySelector("#recorder-player");
                    player.src = URL.createObjectURL(this.file);
                    this.stream.getAudioTracks()[0].stop();
                }
            }
        }
    },
    methods: {
        record() {
            this.startRecord = true;
            let promise = navigator.mediaDevices.getUserMedia({ audio: true, video: false });
            promise.then(stream => {
                this.stream = stream;
                this.recorder = new MediaRecorder(stream);
                this.recorder.start();
                this.autoStop();
            })
        },

        autoStop() {
            this.timer = setTimeout(() => {
                this.stopRecord();
            }, 30000);
        },

        stopRecord() {
            this.startRecord = false;
            this.showPlay = true;
            if (this.stream != null) {
                this.recorder.stop();
            }
            clearTimeout(this.timer);
        },

        playRecord() {
            let player = document.querySelector("#recorder-player");
            player.play();
        },

        cleanRecord() {
            this.startRecord = false;
            this.showPlay = false;
            this.stream = null;
            this.recorder = null;
            this.chunks = [];
            this.file = null;
            clearTimeout(this.timer);
        },

        undo() {
            this.cleanRecord();
        },

        sendRecord() {
            clearTimeout(this.timer);
            this.$emit("send", this.file);
            this.hideRecorder();
        },

        hideRecorder() {
            this.cleanRecord();
            this.$emit("update:showRecorder", false);
        }
    }
}
</script>
<style>
.dialog-wrap > div .record-ctrl {
	display: block;
	margin: 0 auto 30px auto;
	width: 80px;
	height: 80px;
	cursor: pointer;
	color: #f3423f;
}

.dialog-wrap > div .record-start {
	background-color: #f3423f;
	border: 5px solid #ffc8c1;
	border-radius: 50%;
}

.dialog-wrap > div .record-stop {
	background-color: #f3423f;
	border: 5px solid #ffc8c1;
}

.record-confirm {
	display: flex;
	width: 100%;
	height: 100px;
	justify-content: center;
	/* flex-direction: column; */
	align-items: center;
}

.record-confirm svg {
	flex: 1;
	cursor: pointer;
	/* margin-bottom: 10px */
}
</style>
